<mat-toolbar>
    <button (click)="createNewMap()" [title]="'TOOLTIPS.NEW_MAP' | translate"
            color="primary" mat-icon-button>
        <mat-icon>note_add</mat-icon>
    </button>
    <button (click)="mmpService.importMap()" [title]="'TOOLTIPS.IMPORT_MAP' | translate"
            color="primary" mat-icon-button>
        <mat-icon>publish</mat-icon>
    </button>
    <button [matMenuTriggerFor]="export_map" [title]="'TOOLTIPS.EXPORT_MAP' | translate"
            color="primary" mat-icon-button>
        <mat-icon>get_app</mat-icon>
    </button>
    <mat-menu #export_map="matMenu">
        <button (click)="exportMap('json')" mat-menu-item>
            <mat-icon>insert_drive_file</mat-icon>
            <span>{{ "GENERAL.JSON" | translate }}</span>
        </button>
        <button (click)="exportMap('png')" mat-menu-item>
            <mat-icon>image</mat-icon>
            <span>{{ "GENERAL.PNG" | translate }}</span>
        </button>
        <button (click)="exportMap('jpeg')" mat-menu-item>
            <mat-icon>image</mat-icon>
            <span>{{ "GENERAL.JPG" | translate }}</span>
        </button>
        <button (click)="exportMap('pdf')" mat-menu-item>
            <mat-icon>picture_as_pdf</mat-icon>
            <span>{{ "GENERAL.PDF" | translate }}</span>
        </button>
    </mat-menu>

    <div class="vertical-line">
        <div></div>
    </div>

    <button (click)="mmpService.copyNode()" [title]="'TOOLTIPS.COPY_NODE' | translate"
            color="primary" mat-icon-button>
        <mat-icon>content_copy</mat-icon>
    </button>
    <button (click)="mmpService.cutNode()" [title]="'TOOLTIPS.CUT_NODE' | translate"
            color="primary" mat-icon-button>
        <mat-icon>content_cut</mat-icon>
    </button>
    <button (click)="mmpService.pasteNode()" [title]="'TOOLTIPS.PASTE_NODE' | translate"
            color="primary" mat-icon-button>
        <mat-icon>content_paste</mat-icon>
    </button>

    <div class="vertical-line">
        <div></div>
    </div>

    <button (click)="mmpService.updateNode('locked')" [title]="'TOOLTIPS.LOCK_NODE' | translate"
            color="primary" mat-icon-button>
        <mat-icon>{{ node?.locked ? "lock_outline" : "lock_open" }}</mat-icon>
    </button>
    <button (click)="mmpService.addNodeImage()" [title]="'TOOLTIPS.NODE_IMAGE' | translate"
            color="primary" mat-icon-button>
        <mat-icon>{{ node?.image?.src ? "broken_image" : "image" }}</mat-icon>
    </button>

    <div class="vertical-line">
        <div></div>
    </div>

    <button (click)="toogleNodeFontWeight()" [title]="'TOOLTIPS.BOLD_TEXT' | translate"
            color="primary" mat-icon-button>
        <mat-icon>format_bold</mat-icon>
    </button>
    <button (click)="toogleNodeFontStyle()" [title]="'TOOLTIPS.ITALIC_TEXT' | translate"
            color="primary" mat-icon-button>
        <mat-icon>format_italic</mat-icon>
    </button>

    <span class="toolbar-spacer"></span>

    <button (click)="toggleFullScreen()" [title]="'TOOLTIPS.FULLSCREEN' | translate"
            color="primary" mat-icon-button>
        <mat-icon>fullscreen</mat-icon>
    </button>

    <div class="vertical-line">
        <div></div>
    </div>

    <button color="primary" mat-icon-button routerLink="/app/shortcuts">
        <mat-icon>timeline</mat-icon>
    </button>

    <button color="primary" mat-icon-button routerLink="/app/settings">
        <mat-icon>settings</mat-icon>
    </button>

    <button color="primary" mat-icon-button routerLink="/">
        <mat-icon>info</mat-icon>
    </button>
</mat-toolbar>
